<template>
    <div class="dialogBox">
        <el-dialog :title="dialogTitle" :visible.sync="appendDialog" :before-close="cencelSend" width="50%" center>
            <el-form ref="AddYCLData" :rules="rules" :model="AddYCLData" label-width="115px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="池体编号:" prop="poorNo">
                            <el-input v-model="AddYCLData.poorNo" placeholder="请输入池体编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预处理端名称:" prop="preName">
                            <el-input v-model="AddYCLData.preName" placeholder="请输入预处理端名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工艺属性:" prop="processAttr">
                            <el-input v-model="AddYCLData.processAttr" placeholder="请输入工艺属性"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="通讯地址IP:" prop="conIP">
                            <el-input v-model="AddYCLData.conIP" placeholder="请输入通讯地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="检测内容:" prop="chkContent">
                            <el-select v-model="AddYCLData.chkContent" multiple placeholder="请选择">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="btn1" @click="cencelSend('ruleForm')">取 消</el-button>
                <el-button class="btn2" @click="addYCL('AddYCLData')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addYCL, editYCL } from '@/api/cyRobot/handle'
export default {
    props: ['dialogTitle', 'appendDialogVisible', 'formData', 'type'],
    name: 'AddAndEdit',
    data() {
        return {
            //新增or修改按钮
            appendDialog: false,
            //新增数据初始化
            AddYCLData: {
                id:'',
                poorNo: '',
                preName: '',
                processAttr: '',
                conIP: '',
                positionX: '',
                positionY: '',
                chkContent: []
            },
            rules: {
                poorNo: [
                    { required: true, message: '请输入预处理编号', trigger: 'blur' },
                ],
                preName: [
                    { required: true, message: '请输入预处理名称', trigger: 'blur' },
                    { validator: this.checkUnique, trigger: 'blur' }
                ],
                processAttr: [
                    { required: true, message: '请输入工艺属性', trigger: 'blur' },

                ],
                conIP: [
                    { required: true, message: '请输入通讯地址', trigger: 'blur' },
                ],
                positionX: [
                    { required: true, message: '请输入位置信息X轴', trigger: 'blur' },

                ],
                positionY: [
                    { required: true, message: '请输入位置信息Y轴', trigger: 'blur' },
                ],
                chkContent: [
                    { required: true, message: '请选择检测内容', trigger: 'change' }
                ],
            },
            options: [
                {
                    id: 1,
                    name: '氨氮',
                },
                {
                    id: 2,
                    name: '硝氮',
                },
                {
                    id: 3,
                    name: '磷酸盐',
                }
            ],
            value1: [],
        };
    },
    mounted() {

    },
    methods: {
        //自定义校验规则检验机器人名称和机器人编号师傅相等
        checkUnique(rule, value, callback) {
            if (this.AddYCLData.preNo === value) {
                callback(new Error('预处理名称和预处理编号不能相同'));
            } else {
                callback();
            }
        },
        // 取消  
        cencelSend(ruleForm) {
            // this.formData = {};//每次关闭弹窗是时清除父组件传进来的表单数据formData,防止再次点击相同的表格项,watch监听不到新值不做赋值处理
            this.$refs.AddYCLData.resetFields(); // 清除表单数据
            this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
        },
        //增加
        addYCL(AddYCLData) {
            // 先进行表单校验
            this.$refs[AddYCLData].validate((valid) => {
                //校验通过在新增
                if (valid) {
                    //根据有无ID进行修改或编辑有ID为编辑
                    if (this.AddYCLData.id) {
                        this.AddYCLData.chkContent = String(this.AddYCLData.chkContent.splice(','))
                        editYCL(this.AddYCLData).then(response => {
                            if (response.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                                this.$emit('updataList',)//触发父组件里的更新数据方法
                                this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
                            }
                        })
                    } else {
                        // 没有ID则为新增
                        //处理检测内容字段讲数组转化为字符串
                        this.AddYCLData.chkContent = String(this.AddYCLData.chkContent.splice(','))
                        addYCL(this.AddYCLData).then(response => {
                            if (response.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功!'
                                });
                                this.$emit('updataList',)//触发父组件里的更新数据方法
                                this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
                            }
                        })

                    }

                } else {

                    return false;
                }
            });

        },
    },
    //vue2同时想监听两个值变化 先用computed计算出来  我给你解释一下
    //vue2只能监听一个值的变化 但是现在我要同时监听tyep和formdata的值变化
    //所以只能吧他两放到一个值里面,这样只能用computed计算出一个新的属性computedType这个
    //方法里我最后return出的是一个对象对象里面是this.formData和this.type
    computed: {
        computedType() {
            const { formData, type } = this//这里的this代表的是当前组件的实例,这个实例里面包含了所有的数据我从这些数据里面吧formData和type解构出来retun到一个新的对象
            return {
                formData,
                type
            }
        }
    },
    watch: {
        //监听父组传过来的type formData (computedType为了同时监听两个值做了计算)
        computedType(newValue, oldValue) {
            // 父组件里我声明了一个值(0，1)用来区分新增和修改  子组件里使用type来接收
            //先判断监type是否为'0'(新增)'1'(修改) 修改的话处理chkContent字段
            if (newValue.type == '1') {
                //如果有值结构出newValue里的formData所有值给到AddYCLData
                this.AddYCLData = { ...newValue.formData }
                const chkContent = this.formData.chkContent.split(',')//因为多选下拉框接受的是一个数组,而后端接受的是一个字符串所以每次编辑传值之前先把chkContent转换为数组才能回回显 
                this.AddYCLData.chkContent = chkContent
                //不是新增在判断修改的chkContent是否为数组
            } else {
                this.AddYCLData = {
                    poorNo: '',
                    preName: '',
                    processAttr: '',
                    conIP: '',
                    positionX: '',
                    positionY: '',
                    chkContent: []
                }
                //处理新增是传过来的formData是{}会改变AddYCLData.chkContent触发校验
                // this.AddYCLData.chkContent = []//让其值不变避免检验触发
            }
        },
        //监听父组件传过来的表单数据
        appendDialogVisible(newValue, oldValue) {
            this.appendDialog = newValue
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 12vh !important;
}

.dialogBox {
    ::v-deep .el-dialog__header {
        background-color: #123150;
        color: #ffff;
    }

    ::v-deep .el-dialog__title {
        color: #ffff;
    }

    ::v-deep .el-dialog__body {
        background-color: #123150;
    }

    ::v-deep .el-dialog__footer {
        background-color: #123150;
    }

    ::v-deep .el-input__inner {
        background-color: #123150;
        color: #EDEDED;
    }

    ::v-deep .el-form-item__label {
        color: #EDEDED;
    }

    ::v-deep .el-form-item__label {
        width: 111px !important;
    }

    ::v-deep .el-input__inner {
        margin-bottom: 18px;
    }

    ::v-deep .el-input__inner {
        border-color: #1560AC;
    }

    ::v-deep .el-select>.el-input {
        width: 100%;
    }

    ::v-deep .el-select {
        width: 100%;
    }

    ::v-deep.el-input__suffix {
        top: -8px;
    }

    ::v-deep .el-select__tags {
        top: 35%;
    }

    .dialog-footer {
        display: flex;
        justify-content: center;

        .btn1 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
            margin-right: 10%;
        }

        .btn2 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
        }

        ::v-deep .el-button--default {
            background-color: #123150;
        }

        ::v-deep .el-button--default:hover {
            background-color: #F0F0F0;
        }

        ::v-deep .el-button--default {
            color: #E1E2E5;
        }

        ::v-deep .el-button--default:hover {
            color: #142150;
        }
    }
}
</style>